<template>
  <div>
    <div class="m-b-10">
      <OrgSelect
        key="searchOrgSelect"
        v-model="search.organization"
        :url="getReportOrgs"
        :blob="true"
        labelKey="organizationName"
        valueKey="organizationId"
        searchKey="name"
        placeholder="请选择机构"
        :clearable="true"
        style="width: 200px"
        class="m-r-5"
        @getValue="getValue"
        @change="reset()"
        @clear="
          search.org = null
        "
      />
      <!--选择年份限制-->
      <el-date-picker
        v-model="search.Year"
        type="year"
        placeholder="选择年份"
        :pickerOptions="pickerOptions"
        size="mini"
        value-format="yyyy"
        class="m-r-10"
        @change="init()"
        :clearable="false"
      >
      </el-date-picker>
      <el-button type="primary" size="mini" @click="init()">搜索</el-button>
      <el-button type="info" size="mini" @click="resetSearch()">重置</el-button>
    </div>
    <el-table
    :data="tableData"
    border
    size="small"
    :height="WidthTableH"
    style="width: 100%"
    v-loading="loading.table"
    :span-method="objectSpanMethod"
    >
    <el-table-column
    prop="organizationTypeName"
    label="单位"
    align="center"
    ></el-table-column>
    <el-table-column
    prop="insName"
    label="机构/月份"
    align="center"
    ></el-table-column>
    <el-table-column
    v-for="(item, index) in tableColumns"
    :key="index"
    :prop="item.prop"
    :label="item.label"
    align="center"
    >
    <template slot-scope="scope">
    <span v-if="scope.row[item.prop] " class="el-icon-check" style="color:rgb(194, 58, 63);font-size:24px;"></span>
  </template>
    </el-table-column>
  </el-table>
  <pagination
      ref="paginationComp"
      :total="pagination.total"
      @change="init($event)"
    >
  </pagination>
  </div>
</template>

<script>
import { getReportOrgs, getYearAuditResultForm } from '@/api/fetch'
export default {
  components: {
    Pagination: () => import('@/components/pagination/index'),
    OrgSelect: () => import('../../components/select/OrgSelect.vue')
  },
  inject: ['mainH'],
  data () {
    return {
      loading: {
        table: false
      },
      search: {
        name: '',
        Year: '',
        organization: null,
        org: null
      },
      pagination: {
        total: 0
      },
      pickerOptions: {
        disabledDate: function (time) {
          return time.getTime() > Date.now()
        }
      },
      tableColumns: [
        {
          prop: 'january',
          label: '1月'
        },
        {
          prop: 'february',
          label: '2月'
        },
        {
          prop: 'march',
          label: '3月'
        },
        {
          prop: 'april',
          label: '4月'
        },
        {
          prop: 'may',
          label: '5月'
        },
        {
          prop: 'june',
          label: '6月'
        },
        {
          prop: 'july',
          label: '7月'
        },
        {
          prop: 'august',
          label: '8月'
        },
        {
          prop: 'september',
          label: '9月'
        },
        {
          prop: 'october',
          label: '10月'
        },
        {
          prop: 'november',
          label: '11月'
        },
        {
          prop: 'december',
          label: '12月'
        }
      ],
      tableData: [],
      totalTabs: [
        { label: '' }
      ]
    }
  },
  computed: {
    WidthTableH: function () {
      return this.mainH - 120
    }
  },
  mounted () {
    this.search.Year = this.$moment().format('YYYY')
    this.init()
  },
  methods: {
    init () {
      const query = { year: this.search.Year, insCode: this.search.org ? this.search.org.toString() : null }
      this.loading.table = true
      getYearAuditResultForm(query).then(res => {
        this.$set(this.pagination, 'total', res.length)
        this.tableData = res
      }).finally(() => {
        this.loading.table = false
      })
    },
    resetSearch () {
      this.search = {
        name: '',
        Year: this.$moment().format('YYYY'),
        organization: null
      }
      this.reset()
    },
    reset () {
      if (this.$refs.paginationComp) {
        this.$refs.paginationComp.reset()
      }
      this.init()
    },
    getReportOrgs () {
      return getReportOrgs
    },
    getValue (val) {
      this.search.org = val
    },
    flitterData (arr) {
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          // name 修改
          if (item.organizationTypeName === arr[index - 1].organizationTypeName) { // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          };
        }
      })
      return {
        one: spanOneArr
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = (this.flitterData(this.tableData).one)[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
